<template>
  <div>
    <el-bread />

    <el-button
      type="primary"
      size="mini"
      plain
      style="margin-top: 10px"
      @click="addDialog"
      >添加</el-button
    >

    <v-list @edit="edit" />
    <v-dialog :diaInfo="diaInfo" @cancel="cancel" ref="cateRef"/>
  </div>
</template>
<script>
import vList from "./list";
import vDialog from "./dialog";
export default {
  data() {
    return {
      diaInfo: {
        isShow: false, // 是否打开弹框
        isAdd: true, // 是添加还是编辑
      },
    };
  },
  methods: {
    addDialog() {
      // 告诉弹框 isShow需要显示出来
      this.diaInfo.isShow = true;
      // 控制是添加还是编
      this.diaInfo.isAdd = true;
    },
    edit(e) {
      // 编辑打开弹窗
      this.diaInfo.isShow = true;
      // 告诉弹窗你是一个编辑
      this.diaInfo.isAdd = false;
      this.$refs.cateRef.lookup(e)
    },
    // 关闭弹窗
    cancel(e) {
      this.diaInfo.isShow = e;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  components: {
    vList,
    vDialog,
  },
};
</script>
<style scoped></style>
